<template>
  <KView class="goods-order-view">
    <KView>
      <order-item v-for="order in orderList" :key="order.id" :order="order" @pay-order="payOrder" @apply-retreat="applyRetreat"
        @goods-detail="toGoodsDetail" @shop-detail="toShopDetail" @evaluat-goods="evaluatGoods"></order-item>
    </KView>
    <KView class="goods-order-view-more" v-if="loading||pagination.hasNextPage()">
      <sys-loading v-if="loading" :size="60"></sys-loading>
      <KView v-else-if="pagination.hasNextPage()" class="goods-order-view-btn" @click="lookMore">查看更多</KView>
    </KView>
    <KView class="goods-order-view-null" v-else></KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysLoading from 'common/sysLoading';
  import OrderItem from './orderItem';

  export default {
    props: {
      orderList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      }
    },

    data() {
      return {
        loading: false,
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      applyRetreat(goods, order) {
        this.$emit('apply-retreat', goods, order);
      },

      payOrder(order) {
        this.$emit('pay-order', order);
      },

      toGoodsDetail(goods, order) {
        let defId = goods.defId;
        if (SystemUtil.isEmpty(defId)) {
          return;
        }

        let url;
        let activityTypeId = order.activityTypeId;
        switch (activityTypeId) {
          case 1:
            url = `/bargainSituation/${defId}`;
            break;
          case 2:
            url = `/goodsGroupDetail/${defId}`;
            break;
          case 3:
            url = `/auctionDetail/${defId}`;
            break;
          default:
            url = `/goodsDetail/${defId}`;
            break;
        }

        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      toShopDetail(order) {
        let shopData = order.getShopData();
        if (this.isMiniprogram) {
          let data = SystemUtil.formatFormParam(shopData);
          window.open(`/shopMall?${data}`);
        }
      },

      evaluatGoods(goods, order) {
        let data = {
          orderId: order.orderId,
          orderNoSub: goods.orderNoSub,
          defId: goods.defId,
          modelId: goods.modelId,
          name: goods.name,
          modelName: goods.modelName,
          pic: goods.pic,
          branchId: order.branchId,
          partnerId: order.partnerId
        };
        if (this.isMiniprogram) {
          window.evaluatGoodsData = data;
          window.open('/goodsEvaluat');
        }
      },

      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    components: {
      SysLoading,
      OrderItem
    }
  };

</script>

<style lang="scss">
  .goods-order-view {
    padding: formatPx(10) formatPx(30);
    height: calc(100% - #{formatPx(20)});
    overflow: auto;

    .goods-order-item {
      margin-bottom: formatPx(36);

      &:last-child {
        margin-bottom: 0;
      }
    }

    .goods-order-view-more {
      position: relative;
      padding: formatPx(50) 0;
      height: formatPx(66);

      .goods-order-view-btn {
        text-align: center;
        width: formatPx(255);
        height: 100%;
        line-height: formatPx(65);
        border: 1px solid #999999;
        font-size: formatPx(30);
        margin: auto;
        border-radius: formatPx(33);
      }
    }

    .goods-order-view-null {
      height: formatPx(40);
    }
  }

</style>
